@fontColor: #11BAF7;
@fontSize: 18px;
@red: #DD2876;
@orange: #BC7345;
@purple: #8249EA;
.thisPage{
  height: 100%;
  background: url(../../../images/experimentManage/mask.png) no-repeat;
  background-size: 100% 100%;
  color: @fontColor;
  overflow-y: auto;
  header{
    .nav{
      .navBar{
        text-align: center;
        color: #fff;
        line-height: 35px;
        .px2font(22);
        cursor: pointer;
      }
      .data, .threat{
        float: left;
        margin-left: 2%;
        background: url(../../../images/experimentManage/left-tab.png) no-repeat;
        background-size: 100% 100%;
      }
      .dataChecked, .threatChecked{
        float: left;
        margin-left: 2%;
        background: url(../../../images/experimentManage/left-tab-click.png) no-repeat;
        background-size: 100% 100%;
      }
      .origin, .perception{
        float: right;
        margin-right: 2%;
        background: url(../../../images/experimentManage/right-tab.png) no-repeat;
        background-size: 100% 100%;
      }
      .originChecked, .perceptionChecked{
        float: right;
        margin-right: 2%;
        background: url(../../../images/experimentManage/right-tab-click.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  main{
    display: flex;
    // margin: 10px;
    justify-content: space-around;
    .navTitleBox{
      .navIcon{
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 7px;
        background: url(../../../images/experimentManage/nav-title-icon.png) no-repeat;
        background-size: 100% 100%;
      }
      .navTitle{
        display: inline-block;
        height: 32px;
        vertical-align: top;
        line-height: 32px;
      }
    }
    .percentBox{
      height: 30px;
      color: #fff;
      text-align: center;
      background: rgba(49, 82, 247, 0.3);
      border-radius: 12px;
    }
    .upNum{
      color: #00B69B;
    }
    .downNum{
      color: @red;
    }
    aside{
      width: 13%;
      overflow-y: auto;
      // margin: 0 25px;
      .navBox{
        margin-bottom: 1%;
        padding: 13px 25px;
        &:last-of-type{
          margin-bottom: 0;
        }
        .navItem{
          font-size: 16px;
          margin-bottom: 2px;
          cursor: pointer;
        }
      }
      .internetData{
        padding-top: 18px;
        background: url(../../../images/experimentManage/left1.png) no-repeat;
        background-size: 100% 100%;
      }
      .smData, .mobileData, .carsData, .electromagneticData{
        background: url(../../../images/experimentManage/left2.png) no-repeat;
        background-size: 100% 100%;
      }
      .satelliteData{
        background: url(../../../images/experimentManage/left6.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    section{
      width: 89%;
      margin-top: 0.8%;
      .section{
        display: flex;
        margin-top: 15px;
        li{
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
      .section1{
        height: 14%;
        margin-bottom: 15px;
        li{
          width: 19%;
          height: 82px;
          background: url(../../../images/experimentManage/state.png) no-repeat;
          background-size: 100% 100%;
          margin-right: 1%;
          &:last-of-type{
            margin-right: 0;
          }
          img{
            width: 72px;
            height: 60px;
            // margin-right: 40px;
          }
          &:last-of-type{
            img{
              height: 72px;
            }
          }
          .stateRight{
            .stateNum{
              font-size: 40px;
            }
            .doing{
              color: #3253F7;
            }
            .tobeReviewed{
              color: #A38022;
            }
            .finished{
              color: #00B69B;
            }
            .reject{
              color: @red;
            }
          }
        }    
      }
      .section2{
        height: 20%;
        margin-bottom: 15px;
        li{
          width: 31%;
          margin-right: 3%;
          // height: 170px;
          background: url(../../../images/experimentManage/APT-border.png) no-repeat;
          background-size: 100% 100%;
          // margin-top:10px;
          &:last-of-type{
            margin-right: 0;
          }
          .APTLeftImg{
            width: 66px;
            height: 104px;
            // margin-right: 65px;
          }
          .APTRight{
            width: 50%;
            .num{
              font-size: 40px;
            }
            .APTTitle{
              margin-bottom: 12px;
            }
            .percentBox{
              width: 100%;             
            }
          }
        }
      }
      .section3{
        // height: 24%;
        height: 25%;
        // padding: 0 24px;
        // padding-left: 24px;
        // display: flex;
        // justify-content: space-between;
        .newAddLeft{
          .addItem {
            font-size: 16px;
            margin-left: 10px;
            .num{
              font-size: 28px;
            }
            .percentBox{
              width: 100%;   
              font-size: 14px;          
            }
          }
          .totalAdd{
            margin-top: -10px;
          }
        }
        .newAddChartBox{
          position: relative;
          .timeSelectBox{
            position: absolute;
            top: 0;
            right: 40px;
          }
        }
        .newAddChart{
          color: rgba(255, 255, 255, 0.5);
        }
      }
      .section4{
        width: 100%;
        height: 30%;
        // padding: 0 24px;
        justify-content: space-between;
        // height: 293px;
        // border: 1px solid #333;
        .chartBox{
          width: 30%;
          height: 100%;
          padding: 16px;
          overflow: hidden;
        }
        .resourceBox{
          height: 100%;
          margin-right: 24px;
          background: url(../../../images/experimentManage/resource.png) no-repeat;
          background-size: 100% 100%;

        }
        .expTypeBox{
          margin-right: 24px;
          background: url(../../../images/experimentManage/exp-type.png) no-repeat;
          background-size: 100% 100%;
        }
        .expRankBox{
          background: url(../../../images/experimentManage/exp-rank.png) no-repeat;
          background-size: 100% 100%;
        }
        /deep/.el-table{
          color: #53B8F2;
          background: #141935;
        }
        /deep/ .el-table th, /deep/.el-table tr, /deep/.el-table--striped .el-table__body tr.el-table__row--striped td{
          background: #141935;
        }
        /deep/.el-table td, /deep/.el-table th.is-leaf{
          border: none;
        }
        /deep/.el-table--border::after, .el-table--group::after, .el-table::before{
          background: none;
        }
        /deep/.el-table th .cell{
          text-align: left;
          color: rgba(255,255,255,0.5);
          font-weight: normal;
        }
        /deep/.el-table--mini td, .el-table--mini th{
          padding: 2px 0;
        }
        /deep/.el-progress-bar__inner{
          background-color: #3557EF;
        }
        /deep/.el-progress-bar__outer{
          background-color: #101D5B;
        }
        .progress{
          width: 120px;
          display: inline-block;
          right: 0;
          // float: right;
        }
        .el-table_1_column_3  {
          .cell{
            position: relative;
          }
          .progress{
            position: absolute;
            left: 35px;
            top: 38%;
          }
        }
        /deep/.el-table__row{
          &:nth-of-type(1){
            .el-table_1_column_1{
              color: @red;
            }
          }
          &:nth-of-type(2){
            .el-table_1_column_1{
              color: @orange;
            }
          }
          &:nth-of-type(3){
            .el-table_1_column_1{
              color: @purple;
            }
          }
        }
        /deep/.el-table__body tr:hover>td{
          background-color: #141935 !important;
        }
      }
    }
  }
}
